<template>
  <div>
    <zm-panel title="选择销售单" :visible.sync="value" @change="close">
      <zm-form inline :model="searchForm" ref="searchForm" size="small">
        <zm-form-item label="销售单单号" prop="orderNo">
          <el-input v-model="searchForm.orderNo" class="w150" placeholder="请输入销售单号" />
        </zm-form-item>
        <zm-form-item label="客户名称" prop="customerIds">
          <zm-data-select
            v-model="searchForm.customerIds"
            api="getCustomerList"
            :params="{ accountId: obj.id }"
            placeholder="请选择客户名称"
            class="w150"
          ></zm-data-select>
        </zm-form-item>
        <zm-form-item>
          <zm-button t="reset" @click="onReset" />
          <zm-button t="search" @click="onSearch" />
        </zm-form-item>
        <div>
          <zm-form-item label="订单状态:" prop="">
            <zm-data-radio
              :list="getOrderStatusList"
              is-btn
              v-model="searchForm.saleOrderStatus"
              has-all
              @change="onSearch"
            />
          </zm-form-item>
        </div>
        <div>
          <zm-form-item label="回款状态:" prop="">
            <zm-data-radio
              :list="getPaymentStatusList"
              is-btn
              v-model="searchForm.payStatus"
              has-all
              @change="onSearch"
            />
          </zm-form-item>
        </div>
      </zm-form>
      <div class="table-main">
        <zm-table-data
          ref="multipleTable"
          class="mt10"
          :data="tableParams.data"
          :columns="columns"
          :fetch="loadList"
          :table-params="tableParams"
          :show-page="true"
          :mutilple="true"
          :checked="checked"
          :store-key="SOTRE_KEY_SALE_ORDER_LIST"
        >
        </zm-table-data>
        <div class="selectdata border-solid">
          <div class="tc mt10">{{ '当前已选中数量 ( ' + getOrderNos.length + ' )' }}</div>
          <div v-for="(item, index) in getOrderNos" :key="index">
            <div class="item">
              <div>{{ item }}</div>
              <div class="icon" @click="toggleRowByOrderNo(item)">
                <i class="el-icon-delete "></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="tr">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </zm-panel>
    <detail-sale
      v-if="detailVisible"
      v-model="detailVisible"
      :business-id="detailId"
      @after-save="onSearch"
      type="Sale"
    ></detail-sale>
  </div>
</template>

<script>
import { SOTRE_KEY_SALE_ORDER_LIST } from '@/model/tableStoreKey'
import panelMixin from '@/mixins/panelMixin'
import tableMixin from '@/mixins/zmTableMixin'
import { formRule } from '../const'
import saleOrderApi from '@/api/src/saleOrder'
import systemAccountApis from '@/api/src/systemAccount'
import DetailSale from '@/components/DetailContainer'
import { getBaseData } from '@/utils/store'
import { columns } from './const'
export default {
  components: { DetailSale },
  mixins: [panelMixin, tableMixin],
  props: {
    checked: {
      // 回填Id数组
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      searchForm: {
        customerIds: '',
        orderId: '',
        name: '',
        dataType: '3', // 获取移交业务员销售单
        orderNo: '',
        code: '',
        saleOrderStatus: '-1',
        checkStatus: '3',
        payStatus: '-1',
        uploadStatus: '-1',
        receiptStatus: '-1'
      },
      searchMore: {
        operatorId: '',
        saleOrderName: '',
        customerType: '',
        tradeType: '',
        customerName: '',
        saleOrderType: '',
        dateType: '',
        startDate: '',
        endDate: '',
        productType: '',
        productId: '',
        businessScene: '' // 客情销售单业务场景
      },
      SOTRE_KEY_SALE_ORDER_LIST,
      formRule: formRule,
      count: 0,
      detailVisible: false,
      detailId: '',
      menuList: []
    }
  },
  computed: {
    getOrderNos() {
      return this.getSelectionIds('orderNo')
    },
    columns() {
      return columns(this)
    },
    getOrderStatusList() {
      const orderStatus = getBaseData().orderStatus
      console.log('orderStatus', orderStatus)
      const map = ['1', '3']
      const list = orderStatus.filter((item) => {
        return map.includes(item.value)
      })
      console.log('getOrderStatusList', list)
      return list
    },
    getPaymentStatusList() {
      const paymentStatus = getBaseData().paymentStatus
      console.log('paymentStatus', paymentStatus)
      const map = ['1', '2', '4']
      const list = paymentStatus.filter((item) => {
        return map.includes(item.value)
      })
      console.log('paymentStatus list', list)
      return list
    }
  },
  created() {
    console.log('created', this.checked)
  },
  methods: {
    onSearch() {
      this.$set(this.tableParams, 'page', 1)
      this.loadList && this.loadList()
    },
    onDetail(row) {
      console.log('onDetail', row.id, row.relationId)
      this.detailId = row.id
      this.detailVisible = true
    },
    async submit() {
      await systemAccountApis.checkOrder({
        orderNo: this.getSelectionIds('orderNo').join(','),
        handOverId: this.obj.id
      })
      console.log('ids', this.getSelectionIds('orderNo'))
      this.$emit('select', this.getSelectionIds('orderNo'))
      this.$emit('selectId', this.getSelectionIds())
      this.close()
    },
    async loadList() {
      console.log('obj', this.obj)
      let operatorId = this.obj.id
      let apiParams = { ...this.searchForm, ...this.searchMore, operatorId }
      // let apiParams = {
      //   operatorId,
      //   dataType: this.searchForm.dataType,
      //   checkStatus: this.searchForm.checkStatus,
      //   orderNo: this.searchForm.orderNo,
      //   saleOrderType: this.searchMore.saleOrderType,
      //   productType: this.searchMore.productType,
      //   uploadStatus: this.searchForm.uploadStatus,
      //   businessScene: this.searchForm.businessScene
      // }
      let _res = await saleOrderApi.getPageList(this.assignQuery(apiParams))
      // const mapOrderStatus = ['1', '3']
      // const mapPayStatus = ['1', '3', '4']
      // const list = _res.list.filter((item) => {
      //   return mapOrderStatus.includes(item.status) && mapPayStatus.includes(item.payStatus)
      // })
      this.initialTableData(_res.list, _res.count)
    }
  }
}
</script>

<style lang="scss">
@import '~styles/variables';
.text-main {
  background: rgba(255, 191, 0, 0.1);
  padding: 15px;
  margin: 20px;
  .info {
    color: #f7ad60;
    margin-top: 5px;
  }
}
.table-main {
  position: relative;
  padding-right: 400px;
}
.selectdata {
  position: absolute;
  overflow-y: scroll;
  right: 50px;
  top: 0;
  width: 300px;
  height: 600px;
  .item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px dashed $border-color-normal;
    margin: 30px 30px 0px 30px;
    .icon {
      font-size: 20px;
      color: #ff7570;
    }
  }
}
</style>
